<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <script>
  ${cssom}
  </script>
  <script>
  ${compiled_elm_code}
  </script>
  <style>
    .box {
      width: 400px;
      height: 50px;
      border: solid thick;
    }
    .pink {
      background-color: pink;
    }
    .white {
      background-color: white;
    }
    .contain {
      contain: strict;
    }
  </style>
</head>

<body>
  <div id="elm"></div>
  <script>
    var app = Elm.Main.init({
        node: document.getElementById('elm')
    });

    window.metrics = []
    app.ports.elmToWorld.subscribe(function(fromElm){
        window.metrics = fromElm
    })

    function elmRefresh(){
        app.ports.worldToElm.send({tag: "Refresh"})
    }
    function elmStartAnim(){
        app.ports.worldToElm.send({tag: "StartAnim"})
    }
    function elmStopAnim(){
        app.ports.worldToElm.send({tag: "StopAnim"})
    }
    window.elmRefresh = elmRefresh;
    window.elmStartAnim = elmStartAnim;
    window.elmStopAnim = elmStopAnim;

  </script>
</body>
</html>